<%@page import="org.jgs1904.enums.PostTypeEnum"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>发帖页</title>

<script type="text/javascript" charset="utf-8" src="${ bp }/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${ bp }/ueditor/ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="${ bp }/ueditor/lang/zh-cn/zh-cn.js"></script>

<style type="text/css">
	#container {
		width: 1000px;
		border: solid 2px green;
		margin: 50px auto;
		padding: 30px;
	}
	input {
		margin: 10px 0;
	}
</style>
</head>
<body>
	<div id="container">
		<form action="${ bp }/post?method=add" method="post" enctype="multipart/form-data">
			标题：
			<input type="text" name="title" value="${ post.title }">
			<br> 
			类别：
			<select name="type">
				<c:forEach items="${ PostTypeEnum.values() }" var="postTypeEnum">
					<option value="${ postTypeEnum.ordinal() }" ${ postTypeEnum.ordinal() == post.type ? "selected='selected'" : "" }>${ postTypeEnum.desc }</option>
				</c:forEach>
			</select>
			<br> 
			内容：
			<script id="editor" type="text/plain" style="width:100%;height:500px;"></script>
			<input type="hidden" name="content"/>
			<input type="hidden" name="summary"/>
			<br>
			主图：
			<input type="file" name="image">
			<br> 
			<input id="sub_btn" type="button" value="发帖">
			<br> 
			<span style="color:red">${ message }</span>
			<br> 
		</form>
	</div>
	
	<script type="text/javascript" src="${ bp }/static/jquery-3.4.1.js"></script>
	<script type="text/javascript">
		var ue = UE.getEditor('editor');
		
		$(function() {
			
			onload = function() {
				ue.setContent('${ post.content }');
			}
			
			$('#sub_btn').click(function() {
				
				// 获取带样式的内容（html代码）
				let content = ue.getContent();
				// 获取纯文本内容，并截取前10个字符作为摘要
				let summary = ue.getContentTxt().substr(0, 10);
				console.log(content);
				console.log(summary);
				
				// 存放到隐藏域
				$('[name="content"]').val(content);
				$('[name="summary"]').val(summary);
				
				// 提交表单
				$('form').submit();
			})
			
		})
		
	</script>
</body>
</html>